<template>
<section>
  <swiper :auto="true" height="220px" :list="demo01_list" v-model="demo01_index" @on-index-change="demo01_onIndexChange"></swiper>
  <group>
    <cell v-if="product.manufacturer"  title="厂商名称" :value="product.manufacturer"></cell>
    <cell v-if="product.manufacturerAddress" title="厂商地址" :value="product.manufacturerAddress"></cell>
    <cell v-if="product.pesNo" title="产品执行标准号" :value="product.pesNo"></cell>
    <cell v-if="product.fplNo"  title="食品生产许可证编号" :value="product.fplNo"></cell>
    <cell v-if="product.hotLine" :link="'tel:'+product.hotLine" title="厂家热线" :value="product.hotLine"></cell>
    <cell v-if="product.manufacturerMessage" align-items="flex-start"  title="生产商简介" primary="content" :value="product.manufacturerMessage"></cell>
  </group>
</section>
</template>

<script>
import { Swiper, SwiperItem, Group, Cell } from "vux";
import { mapState } from "vuex";
export default {
  components: {
    Swiper,
    SwiperItem,
    Group,
    Cell
  },
  computed: {
    ...mapState({
      product: state => state.product
    })
  },
  data() {
    return {
      demo01_index: 0,
      demo01_list: [
        {
          url: "javascript:",
          img: "/wap/static/swiper/1.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/2.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/3.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/4.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/5.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/6.jpg"
        },
        {
          url: "javascript:",
          img: "/wap/static/swiper/7.jpg"
        }
      ]
    };
  },
  methods: {
    demo01_onIndexChange(index) {
      this.demo01_index = index;
    }
  },
  created() {
    console.log(this.$route.params.id);
  }
};
</script>

<style scoped>
.weui-grid__label {
  color: #6c6c6c;
}
.fa {
  font-size: 36px;
  color: #04be02;
}
.weui-grid__icon {
  margin-bottom: 5px;
}
.vux-demo {
  text-align: center;
}

.logo {
  width: 100px;
  height: 100px;
}

.ximg-demo {
  width: 100%;
  height: auto;
}

.ximg-error {
  background-color: yellow;
}

.ximg-error:after {
  content: "加载失败";
  color: red;
}
</style>
